<template>
    <el-dialog
      title="更多功能"
      :visible.sync="localVisible"
      width="30%"
      @close="handleClose"
    >
      <div class="more-dialog-content">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="navigateTo('/more/BaolongSnackMap')">宝龙广场美食地图</el-menu-item>
          <el-menu-item index="2" @click="navigateTo('/more/ChinaSnackMap')">中国美食地图</el-menu-item>
        </el-menu>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: "MoreDialog",
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        localVisible: this.visible, // 本地控制弹窗的显示状态
      };
    },
    watch: {
      visible(val) {
        this.localVisible = val; // 父组件传入的 visible 改变时同步到本地
      },
      localVisible(val) {
        this.$emit("update:visible", val); // 本地 visible 改变时通知父组件
      },
    },
    methods: {
      closeDialog() {
        this.localVisible = false; // 关闭弹窗
      },
      handleClose() {
        this.$emit("update:visible", false); // 通知父组件关闭弹窗
      },
      navigateTo(route) {
        this.$router.push(route); // 跳转到指定路由
        this.closeDialog(); // 关闭弹窗
      },
    },
  };
  </script>
  
  <style scoped>
  .more-dialog-content {
    padding: 10px;
  }
  </style>
  